<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="div1" id="div1">我是div1</div>
		<div class="div1">我是div2</div>
		<div class="div2">我是div3</div>
		<p>我是p标签</p>
		
		<!-- DOM 获取标签 --- 操作内容 ---- 操作属性 --- 样式（css）---- 事件操作 -->
		<script>
			// js 1.x.x  5.x.x  js 6.x.x 
			// 获取这些DOM数据： 通过标签名、通过类名（class）、通过id名  --- 通用方式
			// 获取标签 ： 通过标签名 -- 拿到的是集合（组）-- 通过索引号 获取指定的标签
			var div = document.getElementsByTagName("div")[0] // 数组   第一个div
			var p = document.getElementsByTagName("p")[0] // 数组  第一个p
			console.log(div) 
			console.log(p) 			
			
			/* 通过类名获取标签 --- 拿到的也是集合 --- 通过索引号获取标签 */
			var a = document.getElementsByClassName("div1")[0] // 第一个类名是div1的标签
			var b = document.getElementsByClassName("div2")[0] // 第一个类名是div2的标签
			console.log(a)
			console.log(b)
			
			/* 通过id获取标签--- 直接获取标签 */
			var c = document.getElementById("div1")
			console.log(c)
		</script>
	</body>
</html>
